<link rel="stylesheet" href="/assets/home/css/avatar.css">

<style>
    .item {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-top: 10px;
        position: relative;
    }

    .item input {
        width: 80%;
        margin-bottom: 0;
    }

    .title {
        width: 70px;
        text-align: right;
    }

    #btn {
        position: absolute;
        width: 96px;
        height: 40px;
        right: 13px;
    }

    #button {
        width: 40%;
        height: 40px;
        display: block;
        margin: 0 auto;
        background: #08acee;
        border-color: #08acee;
        margin-top: 20px;
        color: #fff;
    }
</style>

<header class="mui-bar mui-bar-nav" style="position: sticky;">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">邮箱认证</h1>
</header>

<div class="top_div">
    <div class="userInfo">
        <!-- /assets/home/images/avatar.jpg -->
        <img class="upic" src="{$LoginAuth['avatar_cdn']}" />

    </div>
</div>
<form method="post">
    <div class="item">
        <div class="title">
            邮箱：
        </div>
        <input type="email" name="email" disabled placeholder="请输入邮箱" value="{$LoginAuth['email']}">
    </div>
    <div class="item">
        <div class="title">
            验证码：
        </div>
        <input type="text" name="code" placeholder="请输入验证码">

        <button type="button" id="btn">发送验证码</button>



    </div>
    <button id="button">验证</button>

</form>

<script>
    $('#btn').click(function () {

        var that = $(this)

        var time = 60;

        that.text(time + 's').attr('disabled', true)

        var email = $('input[name="email"]').val()

        var T = setInterval(function () {

            that.text(time + 's')

            if (time == 0) {
                clearInterval(T)

                that.text('发送验证码').attr('disabled', false)
            }

            time--
        }, 1000)

        $.ajax({
            type: 'post',
            url: `{:url('/home/business/send')}`,
            data: {
                email: email,
                busid: `{$LoginAuth['id']}`
            },
            dataType: 'json',
            success: function (res) {
                if (res.code === 1) {
                    mui.toast(res.msg)
                } else {
                    mui.toast(res.msg)
                }
            }
        })
    })

    $('#button').click(function () {
        event.preventDefault();

        var code = $('input[name="code"]').val();
        // console.log(code);

        $.ajax({
            type: 'post',
            url: ``,
            data: {
                code: code,
                // busid: `{$LoginAuth['id']}`
            },
            dataType: 'json',
            success: function (res) {
                console.log(res);
                if (res.code === 1) {
                    location.href = `{:url('home/business/index')}`
                    mui.toast(res.msg)

                } else {

                    mui.toast(res.msg)
                }
            }
        })
    })
</script>